import React from 'react';

export const LoadingState = () => (
  <div className="min-h-screen page-background">
    <div className="flex items-center justify-center min-h-screen">
      <div className="text-center">
        <div className="relative">
          {/* 主旋转动画 */}
          <div className="animate-spin rounded-full h-16 w-16 border-4 border-gradient-to-r from-blue-500 to-purple-500 border-t-transparent mx-auto mb-4 shadow-lg"></div>
          {/* 内部小圆点 */}
          <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-4 h-4 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full animate-pulse"></div>
        </div>
        <h2 className="text-xl font-bold mb-2 bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
          实时热点
        </h2>
        <p className="text-gray-600 animate-pulse">数据加载中...</p>
        <div className="mt-4 flex justify-center space-x-1">
          <div className="w-2 h-2 bg-blue-500 rounded-full animate-bounce" style={{animationDelay: '0ms'}}></div>
          <div className="w-2 h-2 bg-purple-500 rounded-full animate-bounce" style={{animationDelay: '150ms'}}></div>
          <div className="w-2 h-2 bg-blue-500 rounded-full animate-bounce" style={{animationDelay: '300ms'}}></div>
        </div>
      </div>
    </div>
  </div>
);

export const ErrorState = ({ error, onRetry }) => (
  <div className="min-h-screen page-background">
    <div className="flex items-center justify-center min-h-screen">
      <div className="text-center glass-effect p-8 rounded-2xl border border-white/20 shadow-xl">
        <div className="text-6xl mb-4 animate-bounce">⚠️</div>
        <h2 className="text-xl font-bold mb-4 bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
          实时热点
        </h2>
        <p className="text-red-600 mb-6 font-medium">{error}</p>
        <button 
          onClick={onRetry}
          className="px-6 py-3 bg-gradient-to-r from-blue-600 to-purple-600 text-white rounded-xl font-semibold transition-all duration-300 hover:shadow-lg hover:scale-105 transform"
        >
          🔄 重试
        </button>
      </div>
    </div>
  </div>
);

export const EmptyState = () => (
  <div className="text-center py-16">
    <div className="glass-effect p-8 rounded-2xl border border-white/20 shadow-lg mx-auto max-w-md">
      <div className="text-6xl mb-4 animate-pulse">📊</div>
      <p className="text-gray-600 text-lg font-medium">暂无热点数据</p>
      <p className="text-gray-500 text-sm mt-2">请稍后刷新或切换平台</p>
    </div>
  </div>
);